{% extends "website/staff/staff_base.html" %}
{% load static %}
{% block content %}
<h1 style="margin:0;">Assignment Queue</h1>
<div style="opacity:.75;margin-top:4px;">Unassigned items • Auto-assign uses round-robin</div>

<div class="bulk-bar" style="margin-top:12px;">
  <a href="#" class="btn btn-dark" data-auto-assign data-kind="all">Auto-assign (All)</a>
  <a href="#" class="btn btn-light" data-auto-assign data-kind="support">Auto-assign Support</a>
  <a href="#" class="btn btn-light" data-auto-assign data-kind="care">Auto-assign Care</a>
  <span style="opacity:.75;">Tip: run this to distribute work fairly across staff.</span>
</div>

<div class="olutech-card" style="margin-top:14px;">
  <div style="font-weight:800;margin-bottom:10px;">Unassigned Support Tickets</div>
  <div class="table-sticky">
    <table class="table">
      <thead><tr><th>Ticket</th><th>Status</th><th>Priority</th><th>Created</th></tr></thead>
      <tbody>
        {% for t in unassigned_support %}
          <tr>
            <td>#{{ t.public_id }} — {{ t.subject }}</td>
            <td>{{ t.status }}</td>
            <td>{{ t.priority }}</td>
            <td>{{ t.created_at }}</td>
          </tr>
        {% empty %}
          <tr><td colspan="4" style="opacity:.7;">No unassigned support tickets.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="olutech-card" style="margin-top:14px;">
  <div style="font-weight:800;margin-bottom:10px;">Unassigned Care Requests</div>
  <div class="table-sticky">
    <table class="table">
      <thead><tr><th>ID</th><th>Client</th><th>Type</th><th>Status</th><th>Created</th></tr></thead>
      <tbody>
        {% for r in unassigned_care %}
          <tr>
            <td>#{{ r.id }}</td>
            <td>{{ r.full_name }}</td>
            <td>{{ r.request_type }}</td>
            <td>{{ r.status }}</td>
            <td>{{ r.created_at }}</td>
          </tr>
        {% empty %}
          <tr><td colspan="5" style="opacity:.7;">No unassigned care requests.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>
(function(){
  async function autoAssign(kind){
    const resp = await fetch("/staff/api/auto-assign/", {
      method:"POST",
      headers:{
        "Content-Type":"application/json",
        "X-CSRFToken": (document.querySelector('input[name=csrfmiddlewaretoken]')||{}).value || (document.cookie.match(/csrftoken=([^;]+)/)||[])[1] || ""
      },
      body: JSON.stringify({kind: kind, limit: 25})
    });
    const data = await resp.json().catch(()=>({ok:false}));
    if(!data.ok){
      alert(data.error || "Auto-assign failed");
      return;
    }
    alert(`Assigned: Support ${data.assigned.support} • Care ${data.assigned.care}`);
    window.location.reload();
  }

  document.addEventListener('click', (e)=>{
    const btn = e.target.closest('[data-auto-assign]');
    if(btn){ e.preventDefault(); autoAssign(btn.getAttribute('data-kind')); }
  });
})();
</script>
{% endblock %}